<template>
	<view class="content wrap">
		<scan></scan>
		<scanner></scanner>
		<sm></sm>
		<honeywell></honeywell>
		<u-col span="1" text-align="center" @click="scan">
		  <view class="u-m-t-14 weikaishi2">
		    <u-icon name="scan" color="#2b85e4" size="43" style="font-size: 60px;">手机扫描</u-icon>
		  </view>
		</u-col>
		<u-card padding="16">
			<view class="" slot="head">
				<view class="wrap">
					<u-row style="justify-content: center;">
						<u-col span="16" text-align="center">
							<view class="u-line-1 weikaishi">
								<span>容器编码</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="" slot="body">
				<view class="wrap">
					<u-row style="justify-content: center;">
						<u-col span="16" text-align="center">
							<view class="weikaishi6" v-for="(item, index) in scanneal" :key="index">
								<span>{{ item }}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-card>
		
		<u-col span="12" text-align="center">
			<view class="u-m-t-14 weikaishi2">
		  <u-button @click="detail" type="primary">下一步</u-button>
			</view>
		</u-col>
		<u-col span="12" text-align="center">
			<view class="u-m-t-14 weikaishi2">
				<u-button @click="clear" type="primary">清空</u-button>
			</view>
		</u-col>
		
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import scan from "@/components/uni-scan/scan.vue"
	import scanner from "@/components/uni-scan/scanner.vue"
	import sm from "@/components/uni-scan/sm.vue"
	import honeywell from "@/components/uni-scan/honeywell.vue"

	export default {
		components: {
			scanner,
			scan,
			sm,
			honeywell
		},
		data() {
			return {
				form: {
					packNumber: [], //容器编号
				},
				scanneal:[],
			};
		},
		onShow() {
			uni.$off('scan');
			uni.$on('scan', (res) => {
				console.log('扫码结果：', res.codeStr);
				// 检查数组中是否已经存在该值
				if (!this.scanneal.includes(res.codeStr)) {
					this.scanneal.push(res.codeStr);
					console.log(this.scanneal); // 打印扫描结果数组
				} else {
					this.$refs.uToast.show({
						title: '扫描结果重复',
						type: 'success'
					})
				}
			});
			uni.$off('scanner') // 每次进来先 移除全局自定义事件监听器
			uni.$on('scanner', (res) => {
				console.log('扫码结果：', res.code);
				if (!this.scanneal.includes(res.code)) {
					this.scanneal.push(res.code);
					console.log(this.scanneal); // 打印扫描结果数组
				} else {
					this.$refs.uToast.show({
						title: '扫描结果重复',
						type: 'success'
					})
				}

			})
			uni.$off('sm') // 每次进来先 移除全局自定义事件监听器
			uni.$on('sm', (res) => {
				console.log('扫码结果：', res.code);
				if (!this.scanneal.includes(res.code)) {
					this.scanneal.push(res.code);
					console.log(this.scanneal); // 打印扫描结果数组
				} else {
					this.$refs.uToast.show({
						title: '扫描结果重复',
						type: 'success'
					})
				}
			})
			uni.$off('honeywell') // 每次进来先 移除全局自定义事件监听器
			uni.$on('honeywell', (res) => {
				console.log('扫码结果：', res.code);
				if (!this.scanneal.includes(res.code)) {
					this.scanneal.push(res.code);
					console.log(this.scanneal); // 打印扫描结果数组
				} else {
					this.$refs.uToast.show({
						title: '扫描结果重复',
						type: 'success'
					})
				}
			})
		},
		onLoad: function(open) {},
		methods: {
			scan() {
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						if (!this.scanneal.includes(res.result)) {
							this.scanneal.push(res.result);
							console.log(this.scanneal); // 打印扫描结果数组
						} else {
							this.$refs.uToast.show({
								title: '扫描结果重复',
					 		type: 'success'
							})
						}
					}
				});
			},
			detail() {
				 uni.setStorageSync("packNumber",this.scanneal)
				this.$Router.push({
					name: 'container_detail_md',
				})
			},
			clear() {
				this.scanneal = [];
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.wrap {
		padding: 30rpx;
	}

	.weikaishi6 {
		font-size: 24rpx;
	}
</style>
